<template>
  <div style="display: flex; flex-direction: column; height: 100px">
    <div style="line-height: 40px; display: flex">
      <div style="flex: 1;">
        <span :class="collapseBtnClass" style="cursor: pointer;  font-size: 20px" @click="collapse"></span>
        <el-breadcrumb separator="/" style="display: inline-block; margin-left: 10px ">
          <el-breadcrumb-item @click.native="handleClick" to="/bossmanhome">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-if="currentPathName">{{ currentPathName }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <template>
        <el-dropdown style="width: 100px; cursor: pointer; display: flex; align-items: center;">
          <div style="display: flex; align-items: center; margin-top: -15px;">
            <img :src="user.avatar" alt="" class="avatar" style="width: 25px; height: 20px; border-radius: 50%;"/>
            <span style="margin-left: 5px;">{{ user.name }}</span>
            <i class="el-icon-arrow-down" style="margin-left: 5px"></i>
          </div>
          <el-dropdown-menu slot="dropdown" style="width: 100px; text-align: center;">
            <el-dropdown-item style="font-size: 14px; padding: 5px 0;">
              <router-link to="/userinfo">个人信息</router-link>
            </el-dropdown-item>
            <el-dropdown-item style="font-size: 14px; padding: 5px 0;">
              <router-link to="/password">修改密码</router-link>
            </el-dropdown-item>
            <el-dropdown-item style="font-size: 14px; padding: 5px 0;">
              <span style="text-decoration: none;" @click="logout">退出</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </div>

    <div  style="display: flex; flex-wrap: nowrap;margin-right: 10px; margin-top:-18px;overflow-x: auto;">
      <el-tag
          v-for="tag in tags"
          :key="tag.name"
          closable
          @close="removeTag(tag)"
          :type="tag.type"
          style="margin-right: 5px; margin-top: 10px;cursor: pointer"
          @click="handleTagClick(tag)"
      >
        {{tag.name}}
      </el-tag>
    </div>
  </div>
</template>

<script>
export default {
  name: "BossmanHeader",

  data() {
    return {
      currentPathName: '', // 当前页面名称
       tags: [] //初始化空白标签组
    };
  },
  props: {
    collapseBtnClass: String,
    collapse: Function,
    user: Object
  },
  watch: {
    // 监听路由变化，更新当前页面名称和标签
    $route(to) {
      this.updateBreadcrumb(to);
      this.addTag(to);
    }
  },
  mounted() {
    // 初始化时根据当前路径更新面包屑
    this.updateBreadcrumb(this.$route);
    this.addTag(this.$route);
  },
  methods: {
    handleTagClick(tag) {
      // 判断当前路径是否与标签路径相同，避免重复导航错误
      if (this.$route.path !== tag.path) {
        this.$router.push(tag.path);
      } else {
        this.$message.warning(`已经在 ${tag.name} 页面`);
      }
    },
    handleClick() {
      // 判断是否当前路径为首页
      // if (this.$route.path !== '/bossmanhome') {
      //   this.$router.push('/bossmanhome');
      // } else {
      //   this.$message.warning(`已经在首页`);
      // }
    },
    // 更新面包屑，显示当前页面名称
    updateBreadcrumb(route) {
      const path = route.path;
      // 获取路由元信息中的名称，作为面包屑的显示名称
      this.currentPathName = route.name || path.split('/').pop(); // 动态获取路径或元信息
    },
    // 添加标签，防止重复添加相同标签
    addTag(route) {
      const tagName = route.name || route.path.split('/').pop(); // 获取页面名称
      const exists = this.tags.some(tag => tag.name === tagName);
      if (!exists) {
        this.tags.push({name: tagName, path: route.path, type: 'info'});
      }
    },
    // 删除标签
    removeTag(tag) {
      this.tags = this.tags.filter(t => t.name !== tag.name);
    },
    logout() {
      this.$confirm('确定退出登录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.commit('logout')
        this.$message({
          type: 'success',
          message: '退出成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        });
      })
    }
  }
}
</script>

<style scoped>
/* 样式代码 */
</style>
